<template>
  <f7-page>
    <f7-navbar title="头像" back-link></f7-navbar>

      <div class="tien-bar bg-white border-bottom">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>边框
        </div>  
        <div class='action'>
         <switch class='sm' bindchange='SetSize'></switch>
        </div>   
      </div>
      <div class='padding bg-white text-center'>
        <div class='padding borders'>四周</div>
        <div class='padding border-top margin-top'>上</div>
        <div class='padding border-right margin-top'>右</div>
        <div class='padding border-bottom margin-top'>下</div>
        <div class='padding border-left margin-top'>左</div>
      </div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>阴影
        </div>
      </div>
      <div class="padding text-center">
        <div class="padding-xl radius shadow bg-white"> 默认阴影</div>
        <div class="padding-xl radius shadow-lg bg-white margin-top">长阴影</div>
        <div class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</div>
        <div class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</div>
        <div class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"><div>根据背景颜色而改变的阴影</div></div>
      </div>

  </f7-page>

</template>

<script>
import '../../css/colorui/border.css';
export default {
  name:'shadow',
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

